<template>
    <div class="channel-edit">
        <!-- 我的频道 -->
        <van-cell center :border="false">
            <div class="channel-title" slot="title">我的频道</div>
            <van-button
                type="info"
                size="mini"
                round
                @click="isEdit = !isEdit"
                >{{ isEdit ? '完成' : '编辑' }}</van-button
            >
        </van-cell>
        <van-grid :gutter="10">
            <!-- :class="{ active: index === 激活的频道 }" -->
            <van-grid-item
                class="grid-item"
                :class="{ active: index === active }"
                v-for="(value, index) in userChannel"
                :key="index"
                :text="value.name"
                :icon="isEdit && index !== 0 ? 'close' : ''"
                @click="onUserChannel(value, index)"
            >
            </van-grid-item>
        </van-grid>

        <!-- 频道推荐 -->
        <van-cell center :border="false">
            <div class="channel-title" slot="title">频道推荐</div>
        </van-cell>
        <van-grid :gutter="10">
            <van-grid-item
                class="grid-item"
                v-for="(value, index) in recommendChannel"
                :key="index"
                :text="value.name"
                @click="onAdd(value)"
            />
        </van-grid>
    </div>
</template>

<script>
import { getAllChannel, addUserChannel, deleteUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
    data () {
        return {
            // 所有的频道列表
            allChannel: [],
            // 控制编辑的显示状态
            isEdit: false
        }
    },
    props: {
        // 文章频道列表
        userChannel: {
            type: Array,
            required: true
        },
        // 选中的频道
        active: {
            type: Number,
            required: true
        }
    },
    created () {
        this.loadAllChannel()
    },
    methods: {
        // 获取所有的频道列表
        async loadAllChannel () {
            try {
                const { data: res } = await getAllChannel()
                // console.log(res);
                this.allChannel = res.data.channels
            } catch (error) {
                this.$toast('获取频道列表失败!')
            }
        },
        // 添加用户的频道
        async onAdd (channel) {
            this.userChannel.push(channel)

            // 数据持久化
            // 判断是否登录
            if (this.user) {
                // 登录状态，频道保存到服务器上
                await addUserChannel({
                    channels: [{ id: channel.id, seq: this.userChannel.length }]
                })
            } else {
                // 未登录状态，频道保存到本地存储
                setItem('user-channel', this.userChannel)
            }
        },
        // 监听点击用户频道
        onUserChannel (channel, index) {
            if (this.isEdit && index !== 0) {
                // 编辑状态下，执行删除频道操作
                this.deleteChannel(channel, index)
            } else {
                // 非编辑状态下，执行切换频道操作
                this.toggleChannel(index)
            }
        },
        // 删除用户频道
        async deleteChannel (channel, index) {
            // 如果删除的是当前激活频道前面的频道
            if (index <= this.active) {
                // 更新激活频道的索引
                this.$emit('update-active', this.active - 1)
            }
            this.userChannel.splice(index, 1)

            // 数据持久化
            if (this.user) {
                // 登录状态，频道保存到服务器上
                await deleteUserChannel(channel.id)
            } else {
                // 未登录状态，频道保存到本地存储
                setItem('user-channel', this.userChannel)
            }
        },
        // 切换频道 子组件向父组件传值
        toggleChannel (index) {
            // 关闭频道编辑弹出层
            this.$emit('close')

            // 切换频道
            this.$emit('update-active', index)
        }
    },
    computed: {
        ...mapState(['user']),
        // 获取推荐的频道列表  = 所有的频道列表 - 我的频道列表
        recommendChannel () {
            // filter 返回满足条件的数组 条件为 true 的元素
            return this.allChannel.filter(channel => {
                // find 查找满足条件的单个元素
                return !this.userChannel.find(userChannel => {
                    return userChannel.id === channel.id
                })
            })
        }
    }
}
</script>

<style scoped>
.channel-edit {
    padding-top: 44px;
}
.van-button {
    padding: 0 10px;
}
.channel-title {
    font-size: 16px;
    color: #333;
}
.grid-item {
    width: 80px;
    height: 43px;
}
.grid-item /deep/ .van-grid-item__content {
    background-color: #f4f5f6;
}
.grid-item /deep/ .van-grid-item__text {
    font-size: 14px;
    color: #222;
    margin-top: unset;
}
.grid-item /deep/ .van-grid-item__icon {
    position: absolute;
    top: -8px;
    right: -5px;
    font-size: 18px;
    color: #333;
}
.active /deep/ .van-grid-item__text {
    color: red;
}
</style>
